<template>
    <div class="SearchCon">
        <div class="search-con">
            <!-- 搜索历史 -->
            <div class="search-con-1">
                <div class="search-con-his">
                    <div class="search-con-his-left">搜索历史</div>
                    <div class="search-con-his-right">
                        <van-icon name="delete-o"/>
                    </div>
                </div>
                <div class="search-con-list">
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">皮皮虾神仙桶</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">牛排</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">皮皮虾</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">梅梅</van-tag>
                </div>
            </div>
            <!-- 搜索发现-->
            <div class="search-con-1">
                <div class="search-con-his">
                    <div class="search-con-his-left">搜索发现</div>
                    <div class="search-con-his-right">
                        <van-icon name="replay"/>
                    </div>
                </div>
                <div class="search-con-list">
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">冰淇淋</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">虾</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">鸡爪</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">雪糕</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">牛排</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">手抓饼</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">巴沙鱼</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">梦龙</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">牛肉</van-tag>
                    <van-tag round type="primary" color="#f5f5f5" text-color="#666666">火锅</van-tag>
                </div>
            </div>
            <div class="SearchList">
                <div class="SearchList-top">
                    <div class="SearchList-top-left">
                        <img src="image/Search/search-list-1.png" alt="">
                    </div>
                    <div class="SearchList-top-left">
                        <p>更多热榜<van-icon name="arrow"/></p>  
                    </div>
                </div>
                <div class="SearchList-con">
                    <div class="SearchList-con-1">
                        <img src="image/Search/search-list-con-1.png" alt="">
                        <div class="SearchList-con-right">
                            儿童节就是简简单单开开心心
                        </div>
                    </div>
                    <div class="SearchList-con-1">
                        <img src="image/Search/search-list-con-1.png" alt="">
                        <div class="SearchList-con-right">
                            日日鲜晚间特惠 新鲜不隔夜
                        </div>
                    </div>
                     <div class="SearchList-con-1">
                        <img src="image/Search/search-list-con-1.png" alt="">
                        <div class="SearchList-con-right">
                            儿童节就是简简单单开开心心
                        </div>
                    </div>
                    <div class="SearchList-con-1">
                        <img src="image/Search/search-list-con-1.png" alt="">
                        <div class="SearchList-con-right">
                            日日鲜晚间特惠 新鲜不隔夜
                        </div>
                    </div>
                     <div class="SearchList-con-1">
                        <img src="image/Search/search-list-con-1.png" alt="">
                        <div class="SearchList-con-right">
                            儿童节就是简简单单开开心心
                        </div>
                    </div>
                    <div class="SearchList-con-1">
                        <img src="image/Search/search-list-con-1.png" alt="">
                        <div class="SearchList-con-right">
                            日日鲜晚间特惠 新鲜不隔夜
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.SearchList-top-left p{
    color: #333;
    line-height: .20rem;
    border-radius: .20rem;
    vertical-align: middle;
    border: 1px solid #dcdcdc;
    padding: 0 .08rem;
}
.SearchList-top-left p .van-icon{
    vertical-align: middle;
}
.SearchList-top{
    margin-top:.10rem;
    margin-bottom:.15rem;
}
.SearchList-con-right{
    margin-left:.09rem;
}
.SearchList{
    margin:0 .12rem;
}
.SearchList-con{
    display: flex;
    flex-wrap: wrap;
}
.SearchList-con-1{
    width: 50%;
    margin-bottom:.21rem
}
.SearchList-con-1:nth-child(odd){
    padding-right:.16rem;
}
.SearchList-con-1 img{
    width: .50rem;
    height: .50rem;
    object-fit: cover;
}
.SearchList-con-1{
    display: flex;
}
.SearchList-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.SearchList-top-left img{
    width: 1.50rem;
    height: .24rem;
}
.search-con-list .van-tag{
    margin-right: .10rem;
    line-height: .28rem;
    padding: 0 .10rem;
    margin-bottom: .10rem;
}
.search-con-his-right i{
    font-size: .16rem;
    color: #999999;
}
.search-con-1{
    margin:0 .12rem;
}
.search-con-his{
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: .42rem;
    font-size: .14rem;
    color: #333;
}
.search-con{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #fefefe;
    border-top-left-radius: .10rem;
    border-top-right-radius: .10rem;
}
</style>